<div>
    <div>
        <div class="row speBatten">
            <div class="col-xs-6 text-left speLogo">
                <div><img src="static/images/logo.jpg" alt=""></div>
                <div><h3>热点</h3></div>
                <div><span class="glyphicon glyphicon-chevron-down"></span></div>
            </div>
            <div class="col-xs-6 text-right speInfo">
                <ul>
                    <li><a href="">退出</a></li>
                    <li><a href="">用户名</a></li>
                    <li><a ui-sref="home.con">登录</a></li>
                    <li><a ui-sref="home.con" class="gohome">网站首页</a></li>
                </ul>
            </div>
        </div>
        <div>
            <div class="speHeader">
                <h3 class="text-center">专题标题</h3>
                <p>专题描述</p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-8">
            <div class="newsFocus">
                <h5>焦点新闻</h5>
                <div><a href="">更多</a></div>
            </div>
            <!--循环部分2次？-->
            <div class="row contents">
                <div>
                    <div class="col-sm-8 col-xs-12">
                        <div class="home-text">
                            <div>
                                <h3>标题</h3>
                                <span>内容</span>
                            </div>
                            <!--隐藏判断-->
                            <div class="badge">专题</div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-4">
                        <!--没有图片视频需要隐藏掉？判断类型加载不同样式-->
                        <!--如果是图片-->
                        <div class="cont-img">
                            <div class="con-pics">
                                <img class="img-responsive" src="static/images/08.jpg" alt="">
                                <img class="img-responsive" src="static/images/07.jpg" alt="">
                                <img class="img-responsive" src="static/images/09.jpg" alt="">
                            </div>
                            <div class="cont-img-mod">
                                <div class="cont-img-mod-text">3张</div>
                                <div class="cont-img-mod-bg"></div>
                            </div>
                        </div>
                        <!--如果是视频-->
                        <div class="cont-img">
                            <div class="con-pics">
                                <video width="100%" height="100px" controls="controls" autoplay>
                                    <source ng-src="{{sceControl(item.url)}}" type="video/ogg">
                                    <source ng-src="{{sceControl(item.url)}}" type="video/mp4">
                                    Your browser does not support the video tag.
                                </video>
                            </div>
                            <div class="cont-img-mod">
                                <div class="cont-img-mod-text">时长</div>
                                <div class="cont-img-mod-bg"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="newsFocus">
                <h5>热点新闻</h5>
                <div><a href="">更多</a></div>
            </div>
            <!--循环部分4次？-->
            <div class="row contents">
                <div>
                    <div class="col-sm-8 col-xs-12">
                        <div class="home-text">
                            <div>
                                <h3>标题</h3>
                                <span>内容</span>
                            </div>
                            <!--隐藏判断-->
                            <div class="badge">专题</div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-4">
                        <!--没有图片视频需要隐藏掉？判断类型加载不同样式-->
                        <!--如果是图片-->
                        <div class="cont-img">
                            <div class="con-pics">
                                <img class="img-responsive" src="static/images/08.jpg" alt="">
                                <img class="img-responsive" src="static/images/07.jpg" alt="">
                                <img class="img-responsive" src="static/images/09.jpg" alt="">
                            </div>
                            <div class="cont-img-mod">
                                <div class="cont-img-mod-text">3张</div>
                                <div class="cont-img-mod-bg"></div>
                            </div>
                        </div>
                        <!--如果是视频-->
                        <div class="cont-img">
                            <div class="con-pics">
                                <video width="100%" height="100px" controls="controls" autoplay>
                                    <source ng-src="{{sceControl(item.url)}}" type="video/ogg">
                                    <source ng-src="{{sceControl(item.url)}}" type="video/mp4">
                                    Your browser does not support the video tag.
                                </video>
                            </div>
                            <div class="cont-img-mod">
                                <div class="cont-img-mod-text">时长</div>
                                <div class="cont-img-mod-bg"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-4">
            <div class="news-mor">
                <div class="news-mor-tit">
                    <div class="newsHead">早间头条</div>
                    <div class="wx-more">
                        <a href="">更多</a>
                    </div>
                </div>
                <div class="news-list">
                    <ul>
                        <li>凯鹏华盈周炜：Papi酱们面临的困境，其实是“爆款”如何持续？</li>
                        <li>凯鹏华盈周炜：Papi酱们面临的困境，其实是“爆款”如何持续？</li>
                        <li>凯鹏华盈周炜：Papi酱们面临的困境，其实是“爆款”如何持续？</li>
                        <li>凯鹏华盈周炜：Papi酱们面临的困境，其实是“爆款”如何持续？</li>
                    </ul>
                </div>
            </div>
            <div class="wx-channel">
                <div class="wx-channel-tit">
                    <div class="chanHead">
                        <span class="wx-pho"></span>
                        <span class="wx-cha">吴秀波频道</span>
                    </div>
                    <div class="wx-more">
                        <a href="">更多</a>
                    </div>
                </div>
                <div class="wx-list">
                    <ul>
                        <li>凯鹏华盈周炜：Papi酱们面临的困境，其实是“爆款”如何持续？</li>
                        <li>凯鹏华盈周炜：Papi酱们面临的困境，其实是“爆款”如何持续？</li>
                        <li>凯鹏华盈周炜：Papi酱们面临的困境，其实是“爆款”如何持续？</li>
                        <li>凯鹏华盈周炜：Papi酱们面临的困境，其实是“爆款”如何持续？</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>


<style>
    .speLogo,.speInfo ul{
        overflow:hidden;
    }
    .speLogo>div{
        float: left;
        margin: 5px;
    }
    .speInfo ul li{
        float: right;
        margin: 5px;
    }
    .speInfo ul li a{
        padding: 5px 10px;
    }
    .gohome{
        color: #2b669a;
        text-decoration: underline;
    }
    .speBatten{
        border-bottom: 1px solid #000;
    }
    .speHeader{
        width: 100%;
        height: 100px;
        border: 1px solid #eee;
    }
    .speHeader h5{
        padding: 10px 10px;
    }

    .contents{
        border-bottom: 1px solid #ccc;
        padding: 10px 0;
    }
    .home-des li{
        float: left;
        margin: 0 5px;
    }
    .cont-img{
        position: relative;
        width: 100%;
        height: 100px;
        overflow: hidden;
    }
    .cont-img-mod{
        position: absolute;
        border-radius: 10px;
        bottom: 0;
        right: 0;
        width: 46px;
        height: 24px;
        overflow: hidden;
    }
    .cont-img-mod-text,.cont-img-mod-bg{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top:0;
    }
    .cont-img-mod-text{
        text-align: center;
        color: #fff;
        z-index: 10;
    }
    .cont-img-mod-bg{
        z-index: 1;
        background: #000;
        opacity: 0.6;
        filter:alpha(opacity=60);
        -moz-opacity:0.6;
        -khtml-opacity: 0.6;
    }
    .con-pics{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top:0;
    }
    .con-pics img{
        height: 100%;
        width: 100%;
    }
    .home-text div h3,.home-text div span{
        margin-bottom: 10px;
    }
    .wx-channel-tit,.news-mor-tit{
        overflow: hidden;
    }
    .newsHead,.chanHead {
        float: left;
    }
    .wx-more{
        float: right;
    }
    .wx-pho,.wx-cha{
        display: inline-block;
        margin: 0 5px;
    }
    .wx-pho{
        width: 25px;
        height: 25px;
        border: 1px solid #000;
        border-radius:50% ;
    }
    .news-mor,.wx-channel{
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }
    .news-list li{
        list-style-type:square;
    }
    .newsFocus{
        overflow: hidden;
        padding: 5px 0;
        border-bottom: 1px solid #000;
    }
    .newsFocus h5{
        float: left;
        font-size:0.16rem;
    }
    .newsFocus>div{
        float: right;
    }
</style>